<template>
  <div class="w-80">
    <search-box
      ref="search"
      :placeholder="$t('pageEventLogs.table.searchLogs')"
      data-test-id="eventLogs-input-searchLogs"
    />
  </div>

  <el-table
    ref="tableRef"
    row-key="name"
    :data="tableData"
    style="width: 100%"
    @sort-change="sortChange"
  >
    <el-table-column
      prop="name"
      :label="$t('pageSensors.table.name')"
      sortable="custom"
      width="180"
      column-key="id"
    />
    <el-table-column
      prop="status"
      :label="$t('pageSensors.table.status')"
      width="100"
      :filters="[
        { text: 'OK', value: 'OK' },
        { text: 'Critical', value: 'Critical' },
        { text: 'Warning', value: 'Warning' },
      ]"
      :filter-method="filterHandler"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag :type="tagType(scope.row.status)" disable-transitions>{{
          scope.row.status
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="lowerCritical"
      :label="$t('pageSensors.table.lowerCritical')"
      column-key="date"
    >
      <template #default="scope">
        {{ dataFormatter(scope.row.lowerCritical) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="lowerCaution"
      :label="$t('pageSensors.table.lowerWarning')"
    >
      <template #default="scope">
        {{ dataFormatter(scope.row.lowerCaution) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="currentValue"
      :label="$t('pageSensors.table.currentValue')"
    >
      <template #default="scope">
        {{ dataFormatter(scope.row.currentValue) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="upperCaution"
      :label="$t('pageSensors.table.upperWarning')"
    >
      <template #default="scope">
        {{ dataFormatter(scope.row.upperCaution) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="upperCritical"
      :label="$t('pageSensors.table.upperCritical')"
    >
      <template #default="scope">
        {{ dataFormatter(scope.row.upperCritical) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="dynamicChart"
      :label="$t('pageSensors.table.dynamicChart')"
    >
      <template #default="scope">
        <el-button
          type="primary"
          size="small"
          @click="
            Task.createTask(
              scope.row.name,
              scope.row.type,
              scope.row.memberId,
              scope.row.lowerCaution,
              scope.row.upperCaution,
              scope.row.lowerCritical,
              scope.row.upperCritical,
              scope.row.currentValue,
              scope.row.units,
            )
          "
          >{{ $t('pageSensors.table.open') }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import _ from 'lodash';
import { useSensorStore } from '@/store/SystemManagement/Sensor/SensorStore';
import { Task } from '@/utilities/windowTask';
import type { TableColumnCtx } from 'element-plus';
import useDataFormatter from '@/hooks/useDataFormatter';

const sensorStore = useSensorStore();
const { dataFormatter } = useDataFormatter();

await sensorStore.getAllSensors();
const allSensors = computed(() => sensorStore.sensors);
const filterSensors = ref([] as any[]);
filterSensors.value = _.cloneDeep(allSensors.value);
const filterSensorsComputed = computed(() => {
  if (search.value?.filter) {
    return filterSensors.value.filter((item) => {
      return _.includes(JSON.parse(JSON.stringify(item)), search.value.filter)
        ? true
        : false;
    });
  } else return filterSensors.value;
});
const tableData = computed(() => {
  const data = _.cloneDeep(filterSensorsComputed.value);
  return data;
});

const search = ref();

const sortChange = ({
  prop,
  order,
}: {
  column: { [index: string]: any };
  prop: string;
  order: null | 'descending' | 'ascending';
}) => {
  switch (order) {
    case 'descending':
      filterSensors.value.sort((a: any, b: any): any => {
        if (prop == 'date') {
          return b[prop].getTime() - a[prop].getTime();
        }
        return b[prop] - a[prop];
      });
      break;
    case 'ascending':
      filterSensors.value.sort((a: any, b: any): any => {
        if (prop == 'date') {
          return a[prop].getTime() - b[prop].getTime();
        }
        return a[prop] - b[prop];
      });
      break;
    default:
      filterSensors.value = _.cloneDeep(allSensors.value);
      break;
  }
};

const filterHandler = (
  value: string,
  row: any,
  column: TableColumnCtx<any>,
) => {
  const property = column['property'];
  return row[property] === value;
};

const tagType = (val: string) => {
  switch (val) {
    case 'OK':
      return 'success';
    case 'Critical':
      return 'danger';
    case 'Warning':
      return 'warning';
  }
};
</script>
